<html>
    <head>
        <title>数组更新检测</title>
    </head>
    <body>
        <script>
            // ★四、数组更新检测
                                // ★①、变更方法
                                            /*
                                                Vue 将被监听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。
                                                这些被包裹过的方法包括：
                                                    push()
                                                    pop()
                                                    shift()
                                                    unshift()
                                                    splice()
                                                    sort()
                                                    reverse()
                                            */

                                // ★②、替换数组
                                            /*
                                                变更方法，顾名思义，会变更调用了这些方法的原始数据。
                                                相比之下，也有非变更方法，例如  filter(),concat(),slice(). 它们不会变更数组，而总是返回一个新数组。
                                                当使用"非变更方法"时，可以用新数组替换旧数组。


                                                你可能认为这将导致 Vue丢弃现有DOM并重新渲染整个列表。幸运的是，事实并非如此。
                                                Vue为了是的DOM元素得到最大范围的重用而实现了一些智能的启发方式方法，所以用一个含有相同元素的数组去替换原来的数据是非常高效的操作。
                                            */

                                // ★③、注意事项
                                            /*
                                                由于JS的限制， Vue不能检测数组和对象的变化，只能检测代码对数组的变更和替换。
                                            */
        </script>
    </body>
</html>
